<template>
  <div class="order-management">
    <!-- 操作按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">新增订单</el-button>

    <!-- 订单信息表格 -->
    <el-table :data="paginatedOrders" style="width: 100%" stripe>
      <el-table-column label="编号" prop="id" width="150" />
      <el-table-column label="用户名" prop="orders_name" width="200" />
      <el-table-column label="开始时间" prop="begin_time" width="200" />
      <el-table-column label="结束时间" prop="end_time" width="200" />
      <el-table-column label="消费门店" prop="consumer_outlets" width="200" />
      <el-table-column label="对局时长" prop="duration" width="150" />
      <el-table-column label="消费金额" prop="amount_paid" width="150" />
      <el-table-column label="使用的优惠卷" prop="orders_coupons" width="200" />
      <el-table-column label="支付方式" prop="orders_content" width="200" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制和每页条数选择 -->
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="orders.length"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
          class="pagination"
      />
      <el-select v-model="pageSize" class="page-size-select" @change="handlePageSizeChange" placeholder="每页显示条数">
        <el-option label="3条" :value="3"></el-option>
        <el-option label="5条" :value="5"></el-option>
        <el-option label="10条" :value="10"></el-option>
        <el-option label="20条" :value="20"></el-option>
      </el-select>
    </div>

    <!-- 新增/编辑订单弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="currentOrder" :rules="rules" ref="orderForm" label-width="100px">
        <el-form-item label="编号" prop="id">
          <el-input v-model="currentOrder.id" disabled placeholder="自动生成" />
        </el-form-item>
        <el-form-item label="用户名" prop="orders_name">
          <el-input v-model="currentOrder.orders_name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="开始时间" prop="begin_time">
          <el-input v-model="currentOrder.begin_time" placeholder="请输入开始时间" />
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-input v-model="currentOrder.end_time" placeholder="请输入结束时间" />
        </el-form-item>
        <el-form-item label="消费门店" prop="consumer_outlets">
          <el-input v-model="currentOrder.consumer_outlets" placeholder="请输入消费门店" />
        </el-form-item>
        <el-form-item label="对局时长" prop="duration">
          <el-input v-model="currentOrder.duration" placeholder="请输入对局时长" />
        </el-form-item>
        <el-form-item label="消费金额" prop="amount_paid">
          <el-input v-model="currentOrder.amount_paid" placeholder="请输入消费金额" />
        </el-form-item>
        <el-form-item label="使用的优惠卷" prop="orders_coupons">
          <el-input v-model="currentOrder.orders_coupons" placeholder="请输入使用的优惠卷" />
        </el-form-item>
        <el-form-item label="支付方式" prop="orders_content">
          <el-input v-model="currentOrder.orders_content" placeholder="请输入支付方式" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        { id: 1, orders_name: '张三', begin_time: '2024-10-01 14:00', end_time: '2024-10-01 15:00', consumer_outlets: '台球厅A', duration: '1小时', amount_paid: 100, orders_coupons: '50元优惠券', orders_content: '支付宝' },
        { id: 2, orders_name: '李四', begin_time: '2024-10-02 16:00', end_time: '2024-10-02 18:00', consumer_outlets: '台球厅B', duration: '2小时', amount_paid: 200, orders_coupons: '100元优惠券', orders_content: '微信支付' },
        { id: 3, orders_name: '王五', begin_time: '2024-10-03 10:00', end_time: '2024-10-03 12:00', consumer_outlets: '台球厅C', duration: '2小时', amount_paid: 150, orders_coupons: '50元优惠券', orders_content: '银行卡' }
      ],
      currentOrder: { id: null, orders_name: '', begin_time: '', end_time: '', consumer_outlets: '', duration: '', amount_paid: '', orders_coupons: '', orders_content: '' },
      dialogVisible: false,
      dialogTitle: '新增订单',
      currentPage: 1,
      pageSize: 3,
      rules: {
        orders_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        begin_time: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
        end_time: [{ required: true, message: '请输入结束时间', trigger: 'blur' }],
        consumer_outlets: [{ required: true, message: '请输入消费门店', trigger: 'blur' }],
        duration: [{ required: true, message: '请输入对局时长', trigger: 'blur' }],
        amount_paid: [{ required: true, message: '请输入消费金额', trigger: 'blur' }],
        orders_coupons: [{ required: true, message: '请输入使用的优惠卷', trigger: 'blur' }],
        orders_content: [{ required: true, message: '请输入支付方式', trigger: 'blur' }]
      }
    };
  },
  computed: {
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.orders.slice(start, end);
    }
  },
  methods: {
    openAddDialog() {
      this.currentOrder = { id: null, orders_name: '', begin_time: '', end_time: '', consumer_outlets: '', duration: '', amount_paid: '', orders_coupons: '', orders_content: '' };
      this.dialogTitle = '新增订单';
      this.dialogVisible = true;
    },
    openEditDialog(order) {
      this.currentOrder = { ...order };
      this.dialogTitle = '编辑订单';
      this.dialogVisible = true;
    },
    saveOrder() {
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          if (this.currentOrder.id) {
            const index = this.orders.findIndex(item => item.id === this.currentOrder.id);
            this.$set(this.orders, index, this.currentOrder);
          } else {
            this.currentOrder.id = this.orders.length + 1;
            this.orders.push(this.currentOrder);
          }
          this.dialogVisible = false;
          this.$message.success(`${this.dialogTitle === '新增订单' ? '新增' : '编辑'}成功`);
        }
      });
    },
    deleteOrder(order) {
      this.$confirm('确认删除该订单吗?', '删除订单', { type: 'warning' }).then(() => {
        this.orders = this.orders.filter(item => item.id !== order.id);
        this.$message.success('删除成功');
      }).catch(() => {});
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.order-management {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-input[type="textarea"] {
  resize: none;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.page-size-select {
  margin-left: 10px;
  width: 150px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
